<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form>
  名字：<input type="text" name="username" id="username">
  <span id="username_err" style="display: none">用户名含有违禁词或已存在</span>
</form>
<script>
  //绑定失去焦点事件
  document.getElementById("username").onblur=function() {
      //获取参数值
    var username = this.value;
      //发送ajax请求

      //创建核心对象
      var xhttp;
      if (window.XMLHttpRequest){
        xhttp=new XMLHttpRequest();
      }else {
        xhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
      //发送请求
      xhttp.open("post","http://localhost:8080/ajaxdemo/selectUser");
      xhttp.send(username);
      //获取相应
      xhttp.onreadystatechange=function (){
        if (this.readyState==4 && this.status==200){
            if(this.responseText=="true"){
              //用户名存在,显示提示信息
                console.info(this.responseText);
              document.getElementById("username_err").style.display="";
            }else {
              // 用户名不存在，清除提示信息
              document.getElementById("username_err").style.display="none";
            }
        }
      };

  };

</script>
</body>
</html>